<script setup lang="ts">
import { Cascader } from '@idmy/ui'
import { allAppsForCascaders } from './services'

defineOptions({ name: 'AppCascader' })

const emit = defineEmits(['update:modelValue'])

const data = ref([])
onMounted(async () => {
  data.value = await allAppsForCascaders()
})

const props = defineProps({ modelValue: Number, clearable: Boolean })
const model = ref()
watch(
  () => props.modelValue,
  val => {
    model.value = val
  },
  { immediate: true }
)

const onChange = () => {
  emit('update:modelValue', model.value)
}
</script>

<template>
  <Cascader v-model="model" :data="data" placeholder="请选择项目和应用" :clearable="clearable" searchable @change="onChange" />
</template>
